<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- https://s3.ax1x.com/2021/02/02/yuLi59.png
https://s3.ax1x.com/2021/02/02/yuLPUJ.png
https://s3.ax1x.com/2021/02/02/yuLCE4.png -->
    <style>
        * {
            margin: 0;
            padding: 0;
            z-index: 1;
        }

        input:focus,
        button:focus {
            outline: none;
        }

        .bg {
            position: relative;
            width: 320px;
            height: 568px;
            background: url(https://s3.ax1x.com/2021/02/02/yuLOde.png);
            margin: 0 auto;
            overflow: hidden;
        }

        .flyMe {
            width: 34px;
            height: 24px;
            position: absolute;
            bottom: 100px;
            left: 48%;
            /* transform: translateX(-50%); */
            background: url(https://s3.ax1x.com/2021/02/02/yuLCE4.png);
            z-index: -1;
        }

        .start,
        .restart {
            width: 90px;
            height: 40px;
            line-height: 40px;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            letter-spacing: 2px;
            font-weight: 800;
            color: #434343;
            text-align: center;
            cursor: pointer;
            /* 第一种 */
            font-size: 18px;
            text-shadow: 2px 2px 7px #333;
            /* 第二种 */
            /* font-size: 14px;
            border: 3px solid #666;
            border-radius: 3px;
            box-shadow: inset 0px 0px 8px 0px #333; */
        }

        .restart {
            width: 100px;
            position: absolute;
            /* top: 50%; */
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }

        .start {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* display: none; */
        }

        .gameover {
            display: none;
            width: 200px;
            height: 150px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 16px;
            text-align: center;
            border: 1px solid #555;
            line-height: 30px;
            padding-top: 18px;
            box-sizing: border-box;
            border-radius: 3px;
            box-shadow: inset 0px 0px 8px 0px #333;
            background-color: #d3d7d8ad;
            z-index: 999;
        }

        .set {
            display: block;
            width: 40px;
            height: 40px;
            background-color: #c3c8c9bf;
            cursor: pointer;
            margin: 10px;
            z-index: 999;
        }

        .set .icon {
            text-shadow: 1px 1px #333;
        }

        .setCon {
            display: none;
            width: 220px;
            line-height: 35px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 14px;
            padding: 20px 20px 15px;
            box-sizing: border-box;
            border: 2px solid #777;
            background-color: #d7dcddab;
            border-radius: 5px;
            box-shadow: inset 0px 0px 7px #666;
            cursor: default;
        }

        .setCon span {
            font-weight: 800;
            color: #434343;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            letter-spacing: .5px;
        }

        .setCon input {
            width: 30px;
            height: 18px;
            float: right;
            text-align: center;
            line-height: 18px;
            margin-top: 6px;
            border: 1px solid #666;
            background-color: #d7dcddb6;
        }

        .setCon button {
            width: 20px;
            float: right;
            margin-top: 6px;
            border-radius: 2px;
            background-color: #d7dcdd8a;
        }

        .setCon .close {
            width: 80px;
            height: 30px;
            text-align: center;
            font-size: 16px;
            float: none;
            margin-left: 50%;
            transform: translateX(-50%);
            border: none;
            background-color: #cdd3d400;
            text-shadow: 2px 2px 7px #333;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            letter-spacing: 2px;
            font-weight: 800;
            color: #434343;
            cursor: pointer;
        }
    </style>
    <!-- <script src="../jquery-3.4.1.js"></script> -->
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <div class="bg">
        <div class="flyMe"></div>
        <div class="bulletBox"></div>
        <div class="foeBox"></div>
        <div class="start">开始游戏</div>
        <div class="gameover">
            <div class="score">游戏结束</br>您的分数是：<span>0</span></div>
            <div class="restart">重新开始</div>
        </div>
        <div class="set" alt="设置">
            <svg t="1612185614103" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="5398" width="30" height="30">
                <defs>
                    <filter id="f1" x="0" y="0" width="200%" height="200%">
                        <feOffset result="offOut" in="SourceAlpha" dx="0" dy="0" />
                        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="30" />
                        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
                    </filter>
                </defs>
                <path
                    d="M416.4 958h191.2V849.7c0-12.7 6.4-25.5 19.1-31.9 31.9-12.7 63.7-31.9 89.2-51 12.7-6.4 25.5-6.4 38.2 0l95.6 57.3 95.6-165.7-95.6-57.3C837 588.5 830.6 575.7 837 563c0-19.1 6.4-31.9 6.4-51s0-31.9-6.4-51c0-12.7 6.4-25.5 12.7-31.9l95.6-57.3-95.6-165.7-95.6 57.3c-12.7 6.4-25.5 6.4-38.2 0-25.5-19.1-57.3-38.2-89.2-51-12.7-12.7-19.1-25.5-19.1-38.2V66H416.4v108.3c0 12.7-6.4 25.5-19.1 31.9-31.9 12.7-63.7 31.9-89.2 51-12.7 6.4-25.5 6.4-38.2 0l-95.6-51-95.6 165.6 95.6 57.3c12.7 6.4 19.1 19.1 12.7 31.9 0 19.1-6.4 31.9-6.4 51s0 31.9 6.4 51c6.4 12.7 0 25.5-12.7 31.9l-95.6 57.3 95.6 165.7 95.6-57.3c12.7-6.4 25.5-6.4 38.2 0 25.5 19.1 57.3 38.2 89.2 51 12.7 6.4 19.1 19.1 19.1 31.9V958z m223 63.7H384.6c-19.1 0-31.9-12.7-31.9-31.9v-121c-25.5-12.7-51-25.5-70.1-38.2l-101.9 63.7c-12.7 6.4-31.9 6.4-44.6-12.7L8.6 658.6c-12.7-19.1-6.4-38.2 12.7-44.6l101.9-63.7v-76.5L21.4 410.1c-19.1-6.4-25.5-25.5-12.7-44.6l127.4-223c6.4-12.7 25.5-19.1 44.6-6.4l101.9 63.7c19.1-12.7 44.6-31.9 70.1-38.2V34.1c0-19.1 12.7-31.9 31.9-31.9h254.9c19.1 0 31.9 12.7 31.9 31.9v121.1c25.5 12.7 51 25.5 70.1 38.2l101.9-63.7c12.7-6.4 31.9-6.4 44.6 12.7l127.4 223c12.7 19.1 6.4 38.2-12.7 44.6l-101.9 63.7v76.5l101.9 63.7c12.7 6.4 19.1 25.5 12.7 44.6L888 881.5c-6.4 12.7-25.5 19.1-44.6 12.7l-101.9-63.7c-19.1 12.7-44.6 31.9-70.1 38.2v121.1c-0.1 19.2-12.8 31.9-32 31.9zM512 703.2c-108.3 0-191.2-82.8-191.2-191.2S403.7 320.8 512 320.8 703.2 403.7 703.2 512 620.3 703.2 512 703.2z m0-318.6c-70.1 0-127.4 57.3-127.4 127.4S441.9 639.4 512 639.4 639.4 582.1 639.4 512 582.1 384.6 512 384.6z"
                    p-id="5399" fill="#444" filter="url(#f1)">
                </path>
            </svg>
            <div class="setCon">
                <div class="bulCreate">
                    <span>子弹发射速度：</span>
                    <button class="more">+</button>
                    <input type="text" placeholder="3" value="500">
                    <button class="less">-</button>
                </div>
                <div class="foeCreate">
                    <span>敌机数量：</span>
                    <button class="more">+</button>
                    <input type="text" placeholder="3" value="400">
                    <button class="less">-</button>
                </div>
                <div class="speed">
                    <span>飞行速度：</span>
                    <button class="more">+</button>
                    <input type="text" placeholder="3" value="580">
                    <button class="less">-</button>
                </div>
                <div class="close">关闭</div>
            </div>
        </div>
    </div>
</body>
<script src="./js/index.js"></script>

</html>